<style>
svg {
  background-color: rgb(26, 36, 70);
}

.process {
  background-image: conic-gradient(from 0deg, rgba(243, 211, 100, 0.0), rgba(243, 211, 100, 1.0));
}
</style>

<svg width=800 height=600 id='svg'>

  <defs>
    <linearGradient id="myGradient" gradientTransform='rotate(30)'>
      <stop offset="0%"   stop-color="hsl(47, 87.6%, 71.6%)" />
      <stop offset="40%"   stop-color="hsla(47, 87.6%, 71.6%, 0.2)" />
      <stop offset="100%" stop-color="hsla(0,0%,0%, 0)" />
      <animateTransform
        attributeName="gradientTransform"
        attributeType="XML"
        type="rotate"
        from="30"
        to="390"
        dur="10s"
        begin='3s'
        repeatCount="indefinite"
      />
    </linearGradient>
  </defs>

  <g transform='translate(150,150)'>
    <circle r='60' fill='url(#myGradient)'></circle>
    <!-- <circle r='35' fill='rgb(243, 211, 100)' stroke='#786333' stroke-width='10'></circle> -->
    <circle r='35' fill='hsl(47, 85.6%, 67.3%)' stroke='hsl(42, 40.4%, 33.5%)' stroke-width='10'></circle>
  </g>

  <g transform='translate(450,350)'>
    <circle r='60' fill='url(#myGradient)'></circle>
    <!-- <circle r='35' fill='rgb(243, 211, 100)' stroke='#786333' stroke-width='10'></circle> -->
    <circle r='35' fill='hsl(47, 85.6%, 67.3%)' stroke='hsl(42, 40.4%, 33.5%)' stroke-width='10'></circle>
  </g>

</svg>

<pre>hsl 颜色系统，可以在颜色众多的场景中减少主色的数量，方便做配置</pre>

<div class='process' style='width: 190px; height: 190px; border-radius: 50%;'></div>
<pre>conic-gradient 角度渐变</pre>

<div class='w10 h10 ib' style='background-color: rgb(243, 211, 100);'></div> rgb(255, 255, 255)<br />
<div class='w10 h10 ib' style='background-color: hsl(47, 85.6%, 67.3%);'></div> hsl(360, 100%, 100%)